<template>
    <div class="box back151225" style="height: calc(100vh - 4rem - 4px);overflow: auto;"   v-infinite-scroll="loadMoreData">
        <div class="colorFFF">
            推荐视频
        </div>
        <el-row :gutter="20" class="marginTop20">
            <el-col :span="12" v-for="(item, index) in data" :key="index" class="marginBottom20">
                <div class="grid-content bg-purple" @click="showPop(item,index)">
                    <el-image :src="item.first_frame" class="radius10 hand" fit="cover" 
                        style="height: 120px;width: 100%;">
                        <div slot="placeholder" class="image-slot" style="width: 100%; height: 120px;background-color: #272337;">
                                    <img src="@/assets/image/load-image.png" alt="" srcset="" style="width: 40px;margin-left: 40%;margin-top: 20%;">
                                </div>
                    </el-image>
                    <div class="colorFFF size14 marginTop10 omit1">
                        {{ item.creation_name }}
                    </div>
                    <div class="flexSB marginTop5">
                        <div class="flexFS">
                            <div class="flexFS colorFFF size12" >
                                <el-avatar :size="25" :src="item.author.avatar"></el-avatar>
                                <span class="marginLeft5">{{ item.author.name }}</span>
                            </div>
                        </div>
                        <div class="flexFS">
                            <div class="flexFS colorFFF size12" >
                                <img alt src="@/assets/icon/creation/views.png" srcset width="20px" />
                                <span class="marginLeft5">{{ item.viewed }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="text-center font-15 color-999 mt-10" v-if="append_loading">
          加载中...
        </div>
        <div class="text-center font-15 color-999 mt-10" v-if="data.length >= total">
          ~没有更多了~
        </div>
        <short-pop :creation="creation" :index="choose_index" @next="next" @prev="prev" @setLike="setLike" ref="pop"></short-pop>
    </div>
</template>

<script>
import pageTool from "@/mixins/page";
import shortPop from '@/components/video/short.vue'
export default {
    components:{
        shortPop,
    },
    mixins: [pageTool],
    data() {
        return {
            query: {
                creation_type: "short",
                ad_filter:1
            },
            creation: null,
            choose_index: 0,
            
        }
    },
    mounted() {
        this.beforeInit();
    },
    methods: {
        beforeInit() {
            this.url = "/creation/index";
            this.append = true;
            this.init(); //重新请求数据
        },
        loadMoreData() {
            console.log("我执行了");
            this.page++;
            this.init();
        },
        showPop(creation,index) {
            console.log('index',index)
            this.creation = creation
            this.$refs.pop.visible = true
            this.choose_index = index
            this.$nextTick(() => {
                this.$refs.pop.init()
            })
        },
        setLike(data) {
            if (data.type != undefined && data.index != undefined) {
                this.data[data.index].liked_count = data.type
                if (data.type) {
                    this.data[data.index].like_count++
                } else {
                    this.data[data.index].like_count--
                }
            }
        },
        next() {
            console.log('下一个')
            let next_creation = this.data[this.choose_index + 1]
            console.log('next_creation',next_creation)
            if (next_creation) {
                this.creation = next_creation
                this.$nextTick(() => {
                    this.$refs.pop.switch()
                    this.choose_index++
                })
            }
        },
        prev() {
            let prev_creation = this.data[this.choose_index - 1]
            if (prev_creation) {
                this.creation = prev_creation
                this.$nextTick(() => {
                    this.$refs.pop.switch()
                    this.choose_index--
                })
            }
        },
    },

}
</script>

<style lang="scss" scoped>
.box::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
}
</style>